﻿@using RMS.EF.Model
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel-body">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">@("Search condition")</div>
            <div class="panel-body">
                <form id="searchForm" class="form-inline" role="form" onsubmit="search(); return false;">
                    <div class="form-group">
                        <label for="searchValue">@("Search")</label>
                        <input type="text" class="form-control" id="searchValue" name="searchValue" maxlength="50" placeholder="@("Name")" />
                    </div>
                    <div class="form-group">
                        <label for="status">@("Status")</label>
                        <select id="status" name="status" class="form-control">
                            <option value="@(E_Status.All)">--@("All")--</option>
                            <option value="@(E_Status.Disable)">@("Disable")</option>
                            <option value="@(E_Status.Enable)">@("Enable")</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">@("Search")</button>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="toolbar" class="btn-group" role="group" style="margin-bottom:10px;">
            <button type="button" class="btn btn-success" onclick="add()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>@("Add")
            </button>
            <button type="button" class="btn btn-danger" onclick="multidel()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>@("Delete")
            </button>
        </div>
    </div>
    <div class="row">
        <div class="dataTable_wrapper">
            <table class="table table-bordered table-striped table-hover" id="mainTable"></table>
        </div>
    </div>
</div>

@section scripts{
    <script>
        var tableurl = "@Url.Action("ListGetData")";
        var delurl = "@Url.Action("Delete")";
        var editurl = "@Url.Action("Edit")";
        var relmenuurl = "@Url.Action("Relation_Menu")";
        var title = {
            Id: "@("ID")",
            Name: "@("Name")",
            Ordering: "@("Ordering")",
            Status: "@("Status")",
            CreationTime: "@("Creation time")",
            LastUpdateTime: "@("Last update time")",
            Operation: "@("Operation")"
        };
        var msg = {
            sel: "@("Please select the data first")",
            delconfirm: "@("Are you sure you want to delete the data?")",
            add: "@("Add role")",
            edit: "@("Edit role")",
            del: "@("Delete role")",
            rel_menu: "@("Relate menu")",
            multidelconfirm: "@("Are you sure you want to delete the selected data?")",
            disable:"@("Disable")",
            enable:"@("Enable")",
        };
    </script>
    <script>
        var table;
        //表格初始化
        $(function () {
            var data = {};
            $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
            table = $("#mainTable").datatablesSet({
                ajax: { url: tableurl, data: data },
                ordering: true,
                order: [[1, 'asc']],
                columns: [
                          {
                              data: 'Id', title: '<input type="checkbox" id="sel_all" onclick="sel_all()"/>', className: "text-center", orderable: false, width: "10px",
                              createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html('<input type="checkbox" id="sel_' + cellData + '" name="selId" value="' + cellData + '" />');
                              }
                          },
                          {
                              data: 'Id', title: title.Id
                          },
                          {
                              data: 'Name', title: title.Name
                          },
                          {
                              data: 'Ordering', title: title.Ordering
                          },
                          {
                              data: 'Status', title: title.Status, createdCell: function (cell, cellData, rowData, row, col) {
                                  switch (cellData) {
                                      case 0:
                                          $(cell).html(msg.disable);
                                          break;
                                      case 1:
                                          $(cell).html(msg.enable);
                                          break;
                                      default:
                                          break;
                                  }
                              }
                          },
                          {
                              data: 'CreationTime', title: title.CreationTime, createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                              }
                          },
                          {
                              data: 'LastUpdateTime', title: title.LastUpdateTime, createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                              }
                          },
                          {
                              data: 'Id', title: title.Operation, orderable: false, className: "text-center", createdCell: function (cell, cellData, rowData, row, col) {
                                  $(cell).html("<a href='javascript:void(0);' title='" + msg.edit + "' onclick='edit(" + cellData + ")'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></a>")
                                    .append("&nbsp;|&nbsp;")
                                    .append("<a href='javascript:void(0);' title='" + msg.del + "' onclick='del(" + cellData + ")'><span class='glyphicon glyphicon-remove' aria-hidden='true'></a>")
                                    .append("&nbsp;|&nbsp;")
                                    .append("<a href='javascript:void(0);' title='" + msg.rel_menu + "' onclick='rel_menu(" + cellData + ")'><span class='glyphicon glyphicon-link' aria-hidden='true'></a>");
                              }
                          }
                ]
            }).on('xhr.dt', function () {//调用ajax获取数据时清除全选按钮选中状态
                $("#sel_all").prop("checked", false);
            });
        });
        //表格搜索
        function search() {
            var data = {};
            $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
            $("#mainTable").datatablesReAjax(tableurl, data, null, true);
        }
        //删除
        function del(id) {
            $.confirmAjax(msg.delconfirm, { url: delurl, data: { Id: id }, search: function () { table.ajax.reload(null, false); } });
        }
        //新增
        function add() {
            $.modalBox(msg.add, { url: editurl, search: function () { table.ajax.reload(null, false); } });
        }
        //修改
        function edit(id) {
            $.modalBox(msg.edit, { url: editurl, data: { id: id }, search: function () { table.ajax.reload(null, false); } });
        }
        //关联菜单
        function rel_menu(id) {
            $.modalBox(msg.rel_menu, {
                url: relmenuurl,
                data: { id: id },
                beforeSend: function () {
                    $("#modal-form .modal-dialog").addClass("modal-lg");
                },
                search: function () { table.ajax.reload(null, false); },
                unsave: true
            });
        }
        //列表全选
        function sel_all() {
            $("#mainTable").find("input:checkbox").each(function () {
                $(this).prop("checked", $("#sel_all").is(':checked'));
            });
        }
        //批量删除(其他批量操作也可参考)
        function multidel() {
            var selarry = [];
            $("input:checkbox[name='selId']:checked").each(function () {
                selarry.push($(this).val());
            });
            if (selarry.length > 0) {
                var selId = selarry.join(',');
                $.confirmAjax(msg.multidelconfirm, { url: delurl, data: { id: selId }, search: function () { table.ajax.reload(null, false); } });
            } else {
                toastr.warning(msg.sel);
            }
        }
    </script>
}

